<script>
import index from "vuex";

export default {
  name: "anLisan",
  computed: {
    index() {
      return index
    }
  },
  data(){
    return {
      list: [1, 2, 3, 4],
      obj: {
        name: "zs",
        age: 18
      },
      list1: [{id: 0, title: "title1"}, {id: 1, title: "title2"}, {id: 2, title: "title3"}],
      listObj: [
        {
          id: 0,
          titele: "day01-java介绍、环境搭建、变量",
          settion: [
            {
              id: 0,
              sectionName: "01安装jdk"
            },
            {
              id: 1,
              sectionName: "02安装jdk"
            }, {
              id: 2,
              sectionName: "03安装jdk"
            }
          ]

        },
        {
          id: 1, titele: "day02-java介绍、环境搭建、变量",
          settion: [
            {
              id: 0,
              sectionName: "01安装jdk"
            },
            {
              id: 1,
              sectionName: "02安装jdk"
            }, {
              id: 2,
              sectionName: "03安装jdk"
            }
          ]
        },
        {
          id: 2, titele: "day03-java介绍、环境搭建、变量",
          settion: [
            {
              id: 0,
              sectionName: "01安装jdk"
            },
            {
              id: 1,
              sectionName: "02安装jdk"
            }, {
              id: 2,
              sectionName: "03安装jdk"
            }
          ]
        },
      ]
    }
  },
  methods:{

  }
}
</script>

<template>
<div id="app">
  <div>{{list[0]}}</div>
  <div>{{list[1]}}</div>
  <div>{{list[2]}}</div>
  <div>{{list[3]}}</div>
  <div v-for="a in list" :key="a">{{a}}</div>
  <!-- 遍历数字 -->
  <div v-for="num in 10" :key="num">
    {{num}}
  </div>
  <div class="box">
    <div v-for="num in 5" :key="num">
      <div>
        <img src="https://online-course.nos-eastchina1.126.net/1%E5%A4%87%E4%BB%BD%2014-1630366194873663488.png"
             alt="">
      </div>
      <div>名称</div>
      <div>共66节课</div>
      <div>免费</div>
    </div>
  </div>
  <!-- 遍历对象 -->
  <div v-for="(value,key,index) in obj" :key="key">
    {{key}} == {{value}}=={{index}}
  </div>
  <!-- 遍历数组 -->
  <div v-for="(item,index) in list" :key="item">
    {{item}} === {{index}}
  </div>
  <div v-for="(item,index) in list" :key="index">
    {{item}}
  </div>

  <div v-for="item in list1" :key="item.id">
    {{item.title}}
  </div>

  <div v-for="(item,index) in listObj" :key="index">
    {{item.titele}}
    <div v-for="(itemPage,indexPage) in item.settion" :key="indexPage">
      {{index+1}}-{{indexPage+1}} {{itemPage.sectionName}}
    </div>
  </div>
  <!-- v-for必须搭配key属性使用：
      要求：必须是数字或者字符串,
            必须是唯一值
      作用：提高重排效率 就地复用  （diff算法）
  -->
</div>
</template>

<style scoped lang="less">
.box {
  display: flex;
}
</style>